<template>
  <div class="home-page" @wheel="handelWheel">
    <CodeRain color="#FFD700"></CodeRain>

    <div ref="homeBox" class="home-box">
      <h1 @click="onClick"
        style="text-align: center; font-size: 70px; color: #FFD700; font-weight: 1900; margin: 0; padding: 0; cursor: pointer;">
        我就是菜狗
      </h1>
      <div class="content">
        <ul class="skill" style="list-style: square;">
          <li class="skill-item"><span>HTML CSS JS：熟悉基本flex布局技术并能独立完成网页的开发</span></li>
          <li class="skill-item"><span>ES：掌握模块化、解构赋值、Promise/Async Await</span></li>
          <li class="skill-item"><span>TS：熟悉类型注解、接口、泛型、装饰器、编译器配置、</span></li>
          <li class="skill-item"><span>webpack：熟悉使用webpack构建与打包项目</span></li>
          <li class="skill-item"><span>Git：熟悉基本常用命令，能进行分支管理，回滚提交，配合husky提交代码、推送远程仓库等</span></li>
          <li class="skill-item"><span>Vue2,Vue3：组件化开发、路由配置、响应式、VueX与Pinia状态管理</span></li>
          <li class="skill-item"><span>原生微信小程序：自定义组件、WXS语法</span></li>
          <li class="skill-item"><span>Node.js：熟悉以node为核心构建的前端工具链、搭建web服务、非阻塞IO、文件读写流等</span></li>
          <li class="skill-item">
            <span>express、nest.js：能熟练使用express搭建web服务提供前端接口，熟练使用express中间件配置以及了解express中间件运行原理，正在学习nest.js</span>
          </li>
          <li class="skill-item"><span>Java/C#：熟悉其基本语法，熟悉OOP程序设计</span></li>
          <li class="skill-item"><span>ORM框架：熟悉以Sequelize为主的ORM框架，对于Prisma与TypeORM有所了解</span></li>
        </ul>
      </div>
    </div>

    <!-- <ul ref="carousel" @transitionend="onTransitionend" class="Carousel-container" :style="{marginTop: marginTop}">
      <li v-for="(i) in banners" :key="i.id">
        <CarouselItem :placeholder="i.place" :url="i.url" :desc="i.desc"></CarouselItem>
      </li>
    </ul>

    <div @click="upPage" v-show="index > 0" class="icon icon-up">
      <Icon type="upArrow"></Icon>
    </div>
    <div @click="downPage" v-show="index < banners.length - 1" class="icon icon-down">
      <Icon type="downArrow"></Icon>
    </div>

    <ul class="indicators">
      <li @click="switchTo(id)" :class="{active: index === id}" v-for="(i,id) in banners" :key="id"></li>
    </ul> -->
  </div>
</template>

<script>
import CodeRain from '@/components/CodeRain'
import CarouselItem from './components/CarouselItem.vue'
import Icon from '@/components/Icon'
import { getBanners } from '../../api/banner'
export default {
  name: 'home',
  components: {
    CodeRain,
    CarouselItem,
    Icon
  },
  data() {
    return {
      banners: [],
      index: 0,
      carouselHeight: 0,
      carousel: null,
      switching: false,
      loading: true
    }
  },
  methods: {
    onClick() {
      const dom = this.$refs.homeBox
      this.$showMsg({
        content: '🙌🙌🙌🙌？？？？？你本来就是，怎么还用得着说？？？？？🙌🙌🙌🙌',
        type: 'success',
        duration: 1000,
        container: dom,
        callback: () => console.log('弹框已删除')
      })
    },
    upPage() {
      this.index--
    },
    downPage() {
      this.index++
    },
    switchTo(idx) {
      this.index = idx
    },
    handelWheel(e) {
      if (this.switching) return
      let res
      if (e.deltaY < -5) {
        res = this.index - 1
        if (res >= 0) {
          this.switching = true
          this.index = res
        }
      } else if (e.deltaY > 5) {
        res = this.index + 1
        if (res <= this.banners.length - 1) {
          this.switching = true
          this.index = res
        }
      } else {
        return
      }
    },
    handleResize() {
      this.carouselHeight = this.$refs.carousel.clientHeight
    },
    onTransitionend() {
      this.switching = false
    }
  },
  async created() {
    const data = await getBanners()
    this.banners = data
  },
  computed: {
    marginTop() {
      return (- this.index * this.carouselHeight) + 'px'
    }
  },
  mounted() {
    // this.$refs.carousel.addEventListener('wheel', (e) => {
    //    if (e.deltaY > 0) this.handelWheel(1)
    //    else this.handelWheel(-1)
    //  })
    this.carouselHeight = this.$refs.carousel.clientHeight
    window.addEventListener('resize', this.handleResize)
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize)
  }
}
</script>

<style lang="less" scoped>
@import "~@/styles/var.less";
@import "~@/styles/mixin.less";

.home-page {
  width: 100%;
  height: 100%;
  overflow: hidden; // 防止外边距(margin-top)重合影响布局
  background-color: transparent;
  position: relative;

  .home-box {
    width: 70%;
    height: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: rgba(214, 208, 208, 0.8);
    .self-center();
    overflow: hidden;
    border-radius: 2%;

  }
  .skill {
    width: 100%;
    height: 100%;
    padding-left: 3rem;
  }
    .skill-item {
      font-size: 22px;
      font-weight: 800;
      list-style: none;
      color: @deepdark;
      line-height: 2;
    }
  
    .skill-item span {
      /* right-bottom 设置无鼠标经过时,背景图是在右下方开始的 */
      background: linear-gradient(to right, #ec695c, #61c454) no-repeat right bottom;
      /* 宽度 高度 */
      background-size: 0 2px;
      transition: background-size 1300ms;
    }
  
    .skill-item span:hover {
      /* 鼠标经过后,强行将背景开始的方向从 右 变成了 左边，以至于最终效果是 左进右出 */
      background-position-x: left;
      background-size: 100% 2px;
    }

  // .Carousel-container {
  //   width: 100%;
  //   height: 100%;
  //   position: absolute;
  //   list-style: none;
  //   transition: 600ms ease-in-out;
  //   li {
  //     width: 100%;
  //     height: 100%;
  //   }
  // }

  // .icon {
  //   position: absolute;
  //   width: 50px;
  //   height: 50px;
  //   line-height: 50px;
  //   font-size: 50px;
  //   margin: 5px;
  //   color: @white;
  //   transition: 400ms;
  //   cursor: pointer;
  //   @gap: 20px;

  //   &:hover {
  //     color: @cyber;
  //   }

  //   &.icon-up {
  //     left: 50%;
  //     top: @gap;
  //     transform: translateX(-50%);
  //     animation: up 2s infinite;
  //   }
    
  //   &.icon-down {
  //     left: 50%;
  //     bottom: @gap;
  //     transform: translateX(-50%);
  //     animation: down 2s infinite;
  //   }

  //   @jump: 12px;

  //   @keyframes up {
  //     0% {
  //       transform: translate(-50%, @jump);
  //     }

  //     50% {
  //       transform: translate(-50%, -@jump);
  //     }

  //     100% {
  //       transform: translate(-50%, @jump);
  //     }
  //   }

  //   @keyframes down {
  //     0% {
  //       transform: translate(-50%, -@jump);
  //     }

  //     50% {
  //       transform: translate(-50%, @jump);
  //     }

  //     100% {
  //       transform: translate(-50%, -@jump);
  //     }
  //   }
  // }
  
  // .indicators {
  //   position: absolute;
  //   top: 50%;
  //   right: 0;
  //   margin-right: 10px;
  //   transform: translateY(-50%);
  //   list-style: none;

  //   @size: 10px;
  //   li {
  //     width: @size;
  //     height: @size;
  //     background-color: @white;
  //     border-radius: 50%;
  //     margin: 5px;
  //     cursor: pointer;

  //     &.active {
  //       background-color: @cyber;
  //     }
  //   }
  // }

  
}

</style>